<!-- TableView14.vue -->
<template>
  <div>
    <h2>添加表头固定功能,使用示例</h2>
    <Table
        :data="largeData"
        :columns="columns"
        fixed-header
        fixed-header-height="500px"
        resizable
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Table from '@/components/Table/Table.vue'

// 生成大量测试数据
const largeData = ref(Array.from({length: 100}, (_, i) => ({
  id: i + 1,
  name: `用户${i + 1}`,
  age: Math.floor(Math.random() * 50 + 20),
  city: ['北京','上海','广州','深圳'][i%4],
  score: Math.floor(Math.random() * 1000)
})))

const columns = [
  { title: 'ID', dataIndex: 'id', width: '80px' },
  { title: '姓名', dataIndex: 'name', width: '150px' },
  { title: '年龄', dataIndex: 'age', width: '100px' },
  { title: '城市', dataIndex: 'city', width: '120px' },
  { title: '积分', dataIndex: 'score', width: '120px' }
]
</script>